<template >
  <div style="width:100vw;box-sizing:border-box;">
    <!-- <div class="record-header">
      <mt-header fixed title="我要选导师">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <div>
      <div class="search-box">
        <mt-search v-model="searchVal" cancel-text="取消" placeholder="搜索"></mt-search>
      </div>
      <div class="dilver"></div>
      <div class="choose-teacher-list-box">
        <div class="teacher-tips">导师列表</div>
        <div class="bscroll" ref="bscroll">
          <div class="bscroll-container">
            <div class="default-page-box" v-show="teacherList.length == 0">
              <div class="default-page">
                <div class="default-text">哎呀，空空如也!</div>
              </div>
            </div>
            <div style="flex-wrap:wrap;" class="teacher-list flex-row">
              <div :style="(index+1)%3 == 0 ? 'margin-right:0;' : ''" v-for="(item,index) in teacherList" :key="index" class="teacher-list-item">
                <div :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`" class="list-item-picture">
                  <!-- <img v-show="!item.photo" src="@/assets/homePicture/userpicture.png" alt=""> -->
                </div>
                <div style="width:90px;" class="list-item-name">{{item.username}}</div>
                <div class="list-item-content">{{item.introduce}}</div>
                <div @click="apply(item.userId)" class="list-item-btn">一键申请</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import TopTab from "@/components/topTab";
import { Indicator, Toast } from "mint-ui";
import { setText } from "../../untils/ddnavigate";
export default {
  components: {
    TopTab
  },
  data() {
    return {
      searchVal: "",
      teacherList: []
    };
  },
  watch: {
    searchVal(oldVal, newVal) {
      let params = {
        name: oldVal
      };
      this.publicAjax(params);
    }
  },
  mounted() {
    this.publicAjax();
    // better-scroll初始化
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
    // 设置标题文字
    setText("我要选导师");
  },
  methods: {
    publicAjax(params) {
      this.$get("qryTeacherSimple", params).then(res => {
        this.teacherList = res.data;
      });
    },
    apply(id) {
      this.$router.push({
        path: "/MyTeacherDetail",
        query: { id, status: "apply" }
      });
      // this.$get("applayTea", params).then(res => {
      //   if (res.success) {
      //     Toast({
      //       message: "操作成功",
      //       iconClass: "mint-toast-icon mintui mintui-success",
      //       duration: 2000
      //     });
      //   }
      // });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/choose-teacher.less");

.default-page-box {
  position: relative;
  height: 100vh;
}
.bscroll-container{
  padding-bottom:100px; 
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
</style>